<template>
  <at-stepss :active="currentActive" :direction="dir" finish-status="success">
    <span v-for="t in titleArray"  :key="t.id">
      <at-steps :title="t"></at-steps>
    </span>
  </at-stepss>
</template>
<script>
import AtStepss from './steps/src/steps'
import AtSteps from './steps/src/step'
export default {
  name: 'AtStep',
  components: {
    AtStepss,
    AtSteps
  },
  props: {
    // 当前步骤 默认为 0
    currentActive: {
      type: Number,
      default: 0
    },
    titleArray: {
      type: Array,
      default: function () {
        return ['1', '2', '3', '4']
      }
    },
    dir: {
      type: String,
      default: 'horizontal'
    }
  }
}
</script>
<style>
.at-steps {
  font-size: 0
}

.at-steps>:last-child .at-step__line {
  display: none
}

.at-steps.is-horizontal {
  white-space: nowrap
}

.at-steps.is-horizontal.is-center {
  text-align: center
}
.at-step.is-horizontal,
.at-step.is-vertical .at-step__head,
.at-step.is-vertical .at-step__main,
.at-step__line {
  display: inline-block
}

.at-step {
  position: relative;
  vertical-align: top
}

.at-step:last-child .at-step__main {
  padding-right: 0
}

.at-step.is-vertical .at-step__main {
  padding-left: 10px
}

.at-step__line {
  position: absolute;
  border-color: inherit;
  background-color: #bfcbd9
}

.at-step__line.is-vertical {
  width: 2px;
  box-sizing: border-box;
  top: 48px;
  bottom: 0;
  left: 23px
}

.at-step__line.is-horizontal {
  top: 15px;
  height: 2px;
  left: 32px;
  right: 0
}

.at-step__line.is-icon.is-horizontal {
  right: 4px
}

.at-step__line-inner {
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  transition: all 150ms;
  box-sizing: border-box;
  width: 0;
  height: 0
}

.at-step__icon {
  display: block;
  line-height: 28px
}

.at-step__icon>* {
  line-height: inherit;
  vertical-align: middle
}

.at-step__head {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: transparent;
  text-align: center;
  line-height: 28px;
  font-size: 28px;
  vertical-align: top;
  transition: all 150ms
}

.at-step__head.is-finish {
  color: #20a0ff;
  border-color: #20a0ff
}

.at-step__head.is-error {
  color: #ff4949;
  border-color: #ff4949
}

.at-step__head.is-success {
  color: #13ce66;
  border-color: #13ce66
}

.at-step__head.is-process,
.at-step__head.is-wait {
  color: #bfcbd9;
  border-color: #bfcbd9
}

.at-step__head.is-text {
  font-size: 14px;
  border-width: 2px;
  border-style: solid
}

.at-step__head.is-text.is-finish {
  color: #fff;
  background-color: #20a0ff;
  border-color: #20a0ff
}

.at-step__head.is-text.is-error {
  color: #fff;
  background-color: #ff4949;
  border-color: #ff4949
}

.at-step__head.is-text.is-success {
  color: #fff;
  background-color: #13ce66;
  border-color: #13ce66
}

.at-step__head.is-text.is-wait {
  color: #bfcbd9;
  background-color: #fff;
  border-color: #bfcbd9
}

.at-step__head.is-text.is-process {
  color: #fff;
  background-color: #bfcbd9;
  border-color: #bfcbd9
}

.at-step__main {
  white-space: normal;
  padding-right: 10px;
  text-align: left
}

.at-step__title {
  font-size: 14px;
  line-height: 32px;
  display: inline-block
}

.at-step__title.is-finish {
  font-weight: 700;
  color: #20a0ff
}

.at-step__title.is-error {
  font-weight: 700;
  color: #ff4949
}

.at-step__title.is-success {
  font-weight: 700;
  color: #13ce66
}

.at-step__title.is-wait {
  font-weight: 400;
  color: #97a8be
}

.at-step__title.is-process {
  font-weight: 700;
  color: #48576a
}

.at-step__description {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px
}

.at-step__description.is-finish {
  color: #20a0ff
}

.at-step__description.is-error {
  color: #ff4949
}

.at-step__description.is-success {
  color: #13ce66
}

.at-step__description.is-wait {
  color: #bfcbd9
}

.at-step__description.is-process {
  color: #8391a5
}
.at-step__head.is-text.is-success {
  color: #4990ff;
  background-color: #FFFFFF;
  border-color: #4990ff;
}
.at-step__head.is-text {
  font-size: 15px;
  border-width: 1px;
  border-style: solid;  
}
.at-step__head {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: transparent;
}
.at-step__line.is-horizontal {
  top: 23px;
  height: 1px;
  left: 50px;
  right: 4px;
}
.at-step__line-inner {
  display: block;
  border-style: solid;
  border-color: inherit;
  transition: all 150ms;
  height: 0;
  transition-delay: 0ms !important;
  border-width: 0px!important;
  width: 100%;
}
.at-step__icon {
  width: 46px;
  height: 46px;
  display: block;
  line-height: 44px;
}
.at-step__title.is-success {
  font-weight: 500;
  color: #4990ff;
}
.at-step__title {
  font-size: 13px;
  line-height: 32px;
  display: inline-block;
  margin-left: -12px;
}
.at-step__title.is-process {
  font-weight: 500;
  color: #4990FF;
}
.at-step__head.is-text.is-process {
  color: #FFFFFF;
  background-color: white;
  border-color: #4990ff;
  width: 46px;height: 46px;
}
.at-step__head.is-text.is-process .at-step__icon {
  width: 40px;
  height: 40px;
  display: block;
  background-color: #4990ff;
  border-radius: 50%;
  line-height: 40px;
  margin-left: 3px;
  margin-top: 3px;
}
</style>